<template>
    <div class="Login">
        <el-container>
            <el-header style="height: 100px; font-size: 50px;">在 线 学 习 教 育 平 台</el-header>
            <el-container>
                <el-aside width="900px" style="height: 630px; overflow: hidden;">
                    <p class="pp">
                        在许多时候，我们遭遇失败就是我们缺少那一点点坚持、一点点执著，一点点不屈不挠的毅力。分明成功的曙光就在眼前，但是我们却没有信心和毅力再坚持下去，结果从前所遭受的艰难困苦也都白费。
                    </p>
                    <img src="../assets/b11.png" alt="">
                </el-aside>
                <el-main>

                    <el-card class="login-card">
                        <h2>来 这 登 录</h2>
                        <el-form :label-position="right" :model="userInfo" label-width="60px" class="login_form">
                            <el-form-item label="用户名">
                                <el-input prefix-icon="el-icon-user" placeholder="请输入用户名"
                                    v-model="userInfo.name"></el-input>
                            </el-form-item>
                            <el-form-item label="密码">
                                <el-input prefix-icon="el-icon-lock" placeholder="请输入密码" v-model=userInfo.pass
                                    show-password></el-input>
                            </el-form-item>

                            <el-form-item label=" 角色">
                                <el-radio-group size="small " v-model="roles">
                                    <el-radio border label="学生" style="margin-left:-5px; border-radius: 10px;"></el-radio>
                                    <el-radio border label="管理员"
                                        style="margin-left: 5px; margin-right: 10px; border-radius: 10px;"></el-radio>
                                    <el-radio border label="教师" style="margin-left:24px; border-radius: 10px;"></el-radio>
                                </el-radio-group>
                            </el-form-item>

                            <el-button class="loginButton" @click="onLogin">登 录</el-button>


                            <p style="margin-top: 30px;">
                                <el-button type="text" @click="teacherRegister"
                                    style="margin-right: 230px; margin-left: 20px;">注册教师</el-button>
                                <el-button type="text" @click="studentRegister">注册学生</el-button>
                            </p>
                        </el-form>


                        <el-dialog title="教师注册" :visible.sync="dialogVisible1" width="30%">
                            <el-form :model="teacherForm" status-icon :rules="teacherRules" ref="teacherForm"
                                label-width="100px" class="demo-ruleForm">

                                <el-form-item label="用户名" prop="name">
                                    <el-input prefix-icon="el-icon-user" placeholder="请输入用户名"
                                        v-model="teacherForm.name"></el-input>
                                </el-form-item>
                                <el-form-item label="密码" prop="pass">
                                    <el-input v-model="teacherForm.pass" prefix-icon="el-icon-lock" placeholder="请输入密码"
                                        show-password autocomplete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="确认密码" prop="checkPass">
                                    <el-input v-model="teacherForm.checkPass" prefix-icon="el-icon-lock" placeholder="请确认密码"
                                        show-password autocomplete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="联系方式" prop="tel">
                                    <el-input v-model.number="teacherForm.tel" prefix-icon="el-icon-postcard"
                                        placeholder="请输入手机号"></el-input>
                                </el-form-item>
                            </el-form>

                            <div slot="footer" class="dialog-footer">
                                <span slot="footer" class="dialog-footer">
                                    <el-button @click="resetForm('teacherForm')">取 消</el-button>
                                    <el-button type="primary" @click="submitForm('teacherForm')">确 定</el-button>
                                </span>
                            </div>
                        </el-dialog>

                        <el-dialog title="学生注册" :visible.sync="dialogVisible2" width="30%">
                            <el-form :model="studentForm" status-icon :rules="studentRules" ref="studentForm"
                                label-width="100px" class="demo-ruleForm">

                                <el-form-item label="用户名" prop="name">
                                    <el-input v-model="studentForm.name" prefix-icon="el-icon-user"
                                        placeholder="请输入用户名"></el-input>
                                </el-form-item>
                                <el-form-item label="密码" prop="pass">
                                    <el-input type="password" v-model="studentForm.pass" prefix-icon="el-icon-lock"
                                        placeholder="请输入密码" show-password autocomplete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="确认密码" prop="checkPass">
                                    <el-input type="password" v-model="studentForm.checkPass" prefix-icon="el-icon-lock"
                                        placeholder="请确认密码" show-password autocomplete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="联系方式" prop="tel">
                                    <el-input v-model.number="studentForm.tel" prefix-icon="el-icon-postcard"
                                        placeholder="请输入手机号"></el-input>
                                </el-form-item>
                            </el-form>

                            <div slot="footer" class="dialog-footer">
                                <span slot="footer" class="dialog-footer">
                                    <el-button @click="resetForm('studentForm')">取 消</el-button>
                                    <el-button type="primary" @click="submitForm('studentForm')">确 定</el-button>
                                </span>
                            </div>
                        </el-dialog>
                    </el-card>
                </el-main>
            </el-container>
        </el-container>


    </div>
</template>

<script>
export default {
    name: 'Login',
    data() {
        //判断职工学号是否合理
        var checkEin = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('手机号不能为空'));
            }
            setTimeout(() => {
                if (!Number.isInteger(value)) {
                    callback(new Error('请输入数字值'));
                } else {
                    callback();
                }
            }, 1000);
        };
        //密码为空时弹出提示信息teacherForm
        var teacherFormValidatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            } else {
                if (this.teacherForm.checkPass !== '') {
                    this.$refs.teacherForm.validateField('checkPass');
                }
                callback();
            }
        };
        //验证两次密码不一致teacherForm
        var teacherFormValidatePass2 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.teacherForm.pass) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };

        //判断学生手机号是否合理
        var checkStn = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('手机号不能为空'));
            }
            setTimeout(() => {
                if (!Number.isInteger(value)) {
                    callback(new Error('请输入数字值'));
                } else {
                    callback();
                }
            }, 1000);
        };
        //密码为空时弹出提示信息studentForm
        var studentFormValidatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            } else {
                if (this.studentForm.checkPass !== '') {
                    this.$refs.studentForm.validateField('checkPass');
                }
                callback();
            }
        };
        //验证两次密码不一致studentForm
        var studentFormValidatePass2 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.studentForm.pass) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        return {
            //判断不同的注册按钮响应不同的对话框
            dialogVisible1: false,
            dialogVisible2: false,
            //表单对其的方式
            right: "right",
            //登录的身份,默认为空
            //此时方便开发，给一个身份
            roles: "教师",
            //用户输入的登录账号密码信息
            userInfo: {
                name: 'WHY',
                pass: '111',
            },
            //教师注册信息
            teacherForm: {
                name: "",
                pass: "",
                checkPass: "",
                tel: "",
            },
            //学生注册信息
            studentForm: {
                name: "",
                pass: "",
                checkPass: "",
                tel: "",
            },
            //教师表单验证的的规则
            teacherRules: {
                name: [
                    { message: '请输入用户名称', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                pass: [
                    { validator: teacherFormValidatePass, trigger: 'blur' }
                ],
                checkPass: [
                    { validator: teacherFormValidatePass2, trigger: 'blur' }
                ],
                tel: [
                    { validator: checkEin, trigger: 'blur' }
                ]
            },
            //学生表单验证的的规则
            studentRules: {
                name: [
                    { message: '请输入用户名称', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                pass: [
                    { validator: studentFormValidatePass, trigger: 'blur' }
                ],
                checkPass: [
                    { validator: studentFormValidatePass2, trigger: 'blur' }
                ],
                tel: [
                    { validator: checkStn, trigger: 'blur' }
                ]
            },
        }
    },
    methods: {

        //登录失败时的错误提示
        open1() {
            let msg;
            if (this.userInfo.name == null || this.userInfo.pass == null || this.roles == null) {
                msg = "注意，登录信息不能为空！";
            } else {
                msg = "用户名或密码错误，请重新登录！";
                this.userInfo.name = null;
                this.userInfo.pass = null;
                this.roles = null;
            }
            this.$notify.error({
                title: '错误',
                message: msg
            });

        },
        //登录按钮
        onLogin() {
            if (this.userInfo.name != null && this.userInfo.pass != null && this.roles != null) {
                let url, path;
                if (this.roles === '教师') {
                    url = "/teacher/login";
                    path = "/TeIndex";
                } else if (this.roles === '管理员') {
                    url = "/admin/login";
                    path = "/Index";
                } else {
                    url = "/student/login";
                    path = "/StuIndex";
                }
                this.axios.post(url, this.userInfo)
                    .then(res => {
                        if (res.data === "success") {
                            this.$router.push(path)
                        } else {
                            this.open1();
                        }
                    })
            }
            else {
                this.open1();
            }

        },

        //教师注册
        teacherRegister() {
            this.dialogVisible1 = true

        },
        //学生注册
        studentRegister() {
            this.dialogVisible2 = true
        },
        // 提交注册表单并关闭对话框
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                let messageNow = ""
                if (valid) {
                    // 信息无误，准备写入后端，判断是那个注册信息发送对应的请求
                    if (formName === "teacherForm") {
                        this.axios.post("/teacher/save", this.teacherForm)
                            .then(res => {
                                if (res.data === "success") {
                                    messageNow = "恭喜你,教师注册成功！"
                                    this.$notify({
                                        showClose: true,
                                        message: messageNow,
                                        type: 'success',
                                        duration: 1000
                                    });
                                    this.resetForm(formName);
                                }
                            })
                    } else {
                        this.axios.post("/student/save", this.studentForm)
                            .then(res => {
                                if (res.data === "success") {
                                    messageNow = "恭喜你，学生注册成功！";
                                    this.$notify({
                                        showClose: true,
                                        message: messageNow,
                                        type: 'success',
                                        duration: 1000
                                    });
                                    this.resetForm(formName);
                                }
                            })
                    }
                }
                else {
                    this.$notify({
                        showClose: true,
                        message: "注册失败，请重新注册！",
                        type: 'error',
                        duration: 1000
                    });
                    //注册失败重置表单
                    this.resetForm(formName)
                }

            });

            if (formName === "teacherForm") {
                this.dialogVisible1 = false
            } else {
                this.dialogVisible2 = false
            }

        },
        //关闭对话框重置内容
        resetForm(formName) {
            this.$refs[formName].resetFields();
            if (formName === "teacherForm") {
                this.dialogVisible1 = false
            } else {
                this.dialogVisible2 = false
            }

        }

    }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
@font-face {
    font-family: "Heavy";
    src: url(../font/思源柔黑等宽版Heavy.ttf);
}

@font-face {
    font-family: "textFont";
    src: url(../font/也字工厂喵喵体.ttf);
}

@font-face {
    font-family: "xingKai";
    src: url(../font/也字工厂世无双行楷.ttf);
}

.el-header {
    color: #2d3092;
    font-size: 30px;
    font-weight: 700;
    line-height: 100px;
    height: 100px;
    font-family: Heavy;
    text-align: center;
}



.el-aside img {
    height: 500px;
    width: 700px;
    padding-left: 70px;

}

.el-aside .pp {
    text-align: left;
    font-size: 24px;
    font-family: xingKai;
    font-weight: 500;
    width: 750px;
    height: 150px;
    margin-left: 100px;
    /* background-color: aqua; */
    display: flex;
    align-items: end;
    text-indent: 2em;
    line-height: 45px;
    color: #4d4f53;

}

.el-dialog .el-form .el-form-item .el-input {
    width: 280px;
}

.login-card {
    margin: 0;
    padding: 0;
    height: 580px;
    width: 450px;
    border-radius: 10px;
}

.login-card h2 {
    font-size: 35px;
    height: 90px;
    line-height: 90px;
    font-family: Heavy;
    color: #2d3092;
    text-align: center;
    /* background-color: #B3C0D1; */
}

.login_form {
    padding-top: 40px;
}

.el-form-item {
    padding-top: 20px;
}

.el-form-item .el-input {
    margin: 0;
    width: 300px;
}

a {
    text-decoration: none;
}

.router-link-active {
    text-decoration: none;
}

.loginButton {
    width: 300px;
    height: 50px;
    margin-top: 20px;
    background-color: #67e878;
    color: white;
    font-size: 18px;
    font-weight: 700;
    border-radius: 20px;
    margin-left: 50px;
}

.loginButton:hover {
    background-color: #85ed93;
}


.el-dialog__title {
    color: aliceblue;
    font-size: 50px;
}

.Login {

    background-color: #ffffff;
}
</style>
